<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="df fdc">
    <!-- 主要内容 -->
    <section class="main f1 ofs">
        <div class="text1">
            <p class="disTit">目前累计跑步距离：</p>
            <div class="df aic">
                <p class="distance">111</p>
                <span class="kil">公里</span>
            </div>
        </div>
        <!-- 地图 -->
        <div class="map " id="container">
            <div class="df fdc mapText aic ">
                <div class="df jcsb comBox">
                    <div class="commBtn mr20">户外跑</div>
                    <div class="commBtn mr20">燃脂跑</div>
                    <div class="commBtn">跑步机</div>
                </div>
                <a href="./countdown.html" class="cirl">GO</a>
                <div class="set df aic jcc">
                    <p>设置目标</p>
                    <i class="iconfont icon-xiangyou1"></i>
                </div>
            </div>
        </div>
        <!-- 底部字 -->
        <div class="text2 df jcsb aic">
            <div>
                <p class="pathTix">跑步路线</p>
                <p class="path">使用跑步路线, 邂逅附近的同行者</p>
            </div>
            <i class="iconfont icon-xiangyou1"></i>
        </div>
    </section>

    <!-- 地图 -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=97626216b761c9988fa96a4943b8c96e">
    </script>
</body>

</html>